<template>
	<el-form class="fileCategoryEditForm" ref="fileCategoryInfo" :inline="true" :model="fileCategoryInfo" label-width="100px">
		<el-form-item :label="$t('system.fcParentId')">
			<el-cascader style="width: 92%;" ref="tree" v-model="checkedIds" :options="options.fcParentId" :props="props" clearable @change="change">
				<template slot-scope="{ node, data }">
					<span>{{ data.fcName }} </span>
					<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
				</template>
			</el-cascader>
		</el-form-item>
		<el-form-item :label="$t('system.fcName')">
			<el-input v-model="fileCategoryInfo.fcName"></el-input>
		</el-form-item>
	</el-form>
</template>
<script>
	import request from '@/utils/request'
	export default {
		name: 'fileCategoryEdit',
		props: ['fileCategoryInfo'],
		data() {
			return {
				props:{
					checkStrictly: true,
					value: "fcId",
					label: "fcName",
					leaf: "leaf",
					multiple: false
				},
				fileCategoryTree:[],
				checkedIds: [],
				//所有的下拉选项
				options: {
					fcParentId: [],
				}
			}
		},
		watch: {
			fileCategoryInfo: function(val) {

			}
		},
		//页面初始化加载
		created() {
			this.getFcParentId();
		},
		methods: {
			getFcParentId() {
				request({
					url: '/system/fileCategory/queryTree',
					method: 'post'
				}).then(response => {
					this.options["fcParentId"] = response.data;
				})
			},
			change(a,b,c){
				debugger
				var data = this.$refs.tree.getCheckedNodes()[0].data;
				this.fileCategoryInfo.fcParentId = data.fcId;
			},
		}
	}
</script>
<style>
	.fileCategoryEditForm .el-form-item {
		width: 90%;
	}

	.fileCategoryEditForm .el-input {
		width: 150%;
	}
</style>
